<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       body {
           padding: 0;
           margin: 0;
           user-select: none;
       } 
       table {
           width: 100%;
           margin: 40px auto;
           text-align: center;
       }
       .title {
           background-color: palevioletred;
           color: white;
           font-weight: bold;
       }
       .number>span {
           border: 1px solid #666666;
       }
       .num {
           color: red;
       }

       .box {
           background-color: palevioletred;
           overflow: hidden;
       }
       .box>p {
           float: right;
           margin-right: 120px;
           color: white;
       }
       .totalPrice>span,
       .totalNum>span {
            color: yellow;
       }
    </style>
</head>
<body>
    <table border="1" cellspacing="0">
        <thead>
            <tr class="title">
                <td>商品</td>
                <td>单价</td>
                <td>数量</td>
                <td>小计</td>
            </tr>
        </thead>
        <tbody>
            <tr class="goods">
                <td>相机1</td>
                <td class="danjia">8</td>
                <td class="number">
                    <span class="down">-</span>
                    <span class="num">0</span>
                    <span class="add">+</span>
                </td>
                <td class="price">0</td>
            </tr>
            <tr class="goods">
                <td>相机2</td>
                <td class="danjia">10</td>
                <td class="number">
                    <span class="down">-</span>
                    <span class="num">0</span>
                    <span class="add">+</span>
                </td>
                <td class="price">0</td>
            </tr>
            <tr class="goods">
                <td>相机3</td>
                <td class="danjia">12.5</td>
                <td class="number">
                    <span class="down">-</span>
                    <span class="num">0</span>
                    <span class="add">+</span>
                </td>
                <td class="price">0</td>
            </tr>
            <tr class="goods">
                <td>相机4</td>
                <td class="danjia">23</td>
                <td class="number">
                    <span class="down">-</span>
                    <span class="num">0</span>
                    <span class="add">+</span>
                </td>
                <td class="price">0</td>
            </tr>
        </tbody>
    </table>

    <div class="box">
        <p class="totalPrice">合计费用：<span>0</span>￥</p>
        <p class="totalNum">已选中商品：<span>0</span>个</p>
    </div>

    <script>
        (function() {
            //模拟一个存储各种关键值的数据，而不是每次通过innerHTML获取
            let data = [
                {
                    id: 0,
                    danjia: 8,
                    num: 0
                }, 
                {
                    id: 1,
                    danjia: 10,
                    num: 0
                },
                {
                    id: 2,
                    danjia: 12.5,
                    num: 0
                },
                {
                    id: 3,
                    danjia: 23,
                    num: 0
                }
            ];

            let aAdd = document.querySelectorAll(".goods .add"),
                aDown = document.querySelectorAll(".goods .down");
                aNum = document.querySelectorAll(".goods .num"),
                aPrice = document.querySelectorAll(".goods .price"),
                aTotalPrice = document.querySelector(".box .totalPrice span"),
                aTotalNum = document.querySelector(".box .totalNum span");

            let len = aAdd.length;
 
            //页面的变化
            function change(i) {
                //数量栏目里面显示出新的数量
                aNum[i].innerHTML = data[i].num;

                //小计栏目显示出新的小计价格
                aPrice[i].innerHTML = data[i].danjia * data[i].num;

                //总价格与总数量的更新
                let sum = 0, p = 0;
                for(let i=0;i<len;i++) {
                    sum += data[i].num;
                    p += data[i].num * data[i].danjia;
                }
                aTotalNum.innerHTML = sum;
                aTotalPrice.innerHTML = p;
            }

            for(let i=0;i<len;i++) {
                //+按钮
                aAdd[i].onclick = function() {
                    //数量的变化
                    data[i].num ++;

                    change(i);
                }

                //-按钮
                aDown[i].onclick = function() {
                    //数量的变化
                    data[i].num --;
                    if(data[i].num<0) {data[i].num = 0}

                    // //数量栏目里面显示出新的数量
                    // aNum[i].innerHTML = data[i].num;

                    // //小计栏目显示出新的小计价格
                    // aPrice[i].innerHTML = data[i].danjia * data[i].num;
                
                    // //总价格与总数量的更新
                    // let sum = 0, p = 0;
                    // for(let i=0;i<len;i++) {
                    //     sum += data[i].num;
                    //     p += data[i].num * data[i].danjia;
                    // }
                    // aTotalNum.innerHTML = sum;
                    // aTotalPrice.innerHTML = p;

                    change(i);
                }
            }
        })();
    </script>
</body>
</html>